<template>
	<view class="page-content">
		<u-navbar title="积分兑换商品详情" :autoBack="true" :bgColor="theme_color" :titleStyle="{color:'#ffffff'}"
			leftIconColor="#ffffff">
			<view class="u-nav-slot" slot="left">
				<u-icon name="arrow-left" size="19" color="#ffffff"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px" color="#ffffff"></u-line>
				<u-icon name="home" size="20" color="#ffffff" @click="onToHomePage"></u-icon>
			</view>
		</u-navbar>
		<view :style="'margin-top:' + navH + 'px;'">
			<view class="tab-box acea-row row-around">
				<view class="left" @click="changeTab(0)" v-bind:class="{'selected':current==0}">
					商品
				</view>
				<view class="middle" @click="changeTab(1)" v-bind:class="{'selected':current==1}">
					详情
				</view>
				<view v-if="false" class="right" @click="current2()" v-bind:class="{'selected':current==2}">
					评价
				</view>
			</view>

			<swiper :current="current" :autoplay="false" :interval="500" :duration="500" :vertical="true"
				@change="swiperChangeItem" :style="{ 'height' : scroll_Height_4 +'px'}">
				<swiper-item>
					<scroll-view scroll-y="true" :style="{'height':scroll_Height_5+'px' }">
						<view class="swiper-item">
							<view class="goods-box">
								<swiper :current="mode_current" :indicator-dots="true" :autoplay="false" :interval="500"
									:duration="500" style="height: 700rpx;">
									<swiper-item class="img-box" v-if="goodsInfo.img_gallery.length>0"
										v-for="(value,index) in goodsInfo.img_gallery" :key="index">
										<image :src="value.img_url" :data-src="value.img_original" @tap="onPreviewImage"
											mode="aspectFit">
										</image>
									</swiper-item>
								</swiper>
								<view style="padding: 30rpx;font-size: 16px;font-weight: bold;">
									{{goodsInfo.goods_name}}
								</view>
								<view class="goods-name " style="padding-top: 10rpx;">
									<text class="txt-price">
										兑换积分：{{exchange_integral}} /{{goodsInfo.unit}}
									</text>
									<!-- <text class="txt-unit" v-if="goodsInfo.unit != ''">
										元/{{goodsInfo.unit}}
									</text>
									<text class="txt-unit" style="padding-left: 20rpx;">
										兑换积分：{{exchange_integral}}
									</text> -->
								</view>
								<view class="goods-name" style="padding-top: 0rpx;">
									<text class="txt-old">库存&ensp;:</text>
									<text class="txt-old"> {{goodsInfo.goods_number}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item-2">
						<scroll-view scroll-y="true"
							style="min-height: 500px;padding: 10px;letter-spacing: 2px;font-size: 16px;">
							<bctos-rich-text :nodes="goodsInfo.goods_desc"></bctos-rich-text>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>

			<view class="footer acea-row row-between-wrapper">
				<view class="item" @click="storeTo(goodsInfo.supplier_id)" v-if="goodsInfo.supplier_id != 0">
					<view class="iconfont icon-dianpu"></view>
					<view class="text">
						店铺
					</view>
				</view>
				<view>
					<u-number-box v-model="exchange_number" @change="exchangeChange" :min="1"
						:max="goodsInfo.goods_number"></u-number-box>
				</view>
				<view class="bnt">
					<button style="border-radius: 50rpx;background-color: #FE960F;float: right;" class="bnts"
						@click="exchange()">
						兑换
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		goods_info
	} from '@/api/store.js'
	import {
		toLogin
	} from "@/libs/login";
	const common = require('@/mixins/common');
	var options = {};
	common(options);
	export default {
		mixins: [{
			methods: options
		}],
		computed: mapGetters(["isLogin", "app_token"]),
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				goods_id: '',
				goodsInfo: {
					img_gallery: [],
					goods_number: 1
				},
				scroll_Height_4: 0,
				scroll_Height_5: 0,
				current: 0,
				mode_current: 0,

				exchange_number: 1,
				exchange_integral: ''

			}
		},
		onLoad(e) {
			this.navH = getApp().globalData.navHeight / 2;
			this.scroll_Height_4 = uni.getSystemInfoSync().screenHeight - 100;
			this.scroll_Height_5 = uni.getSystemInfoSync().screenHeight - 145;
			var that = this;
			this.goods_id = e.goods_id;
			this.exchange_integral = e.exchange_integral;
			if (this.isLogin) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				goods_info({
					goods_id: that.goods_id,
					app_token: that.app_token
				}).then((res) => {
					console.log(res)
					that.goodsInfo = res.data;
					uni.hideLoading()
				})
			} else {
				toLogin();
			}

		},
		methods: {
			// #ifdef MP-WEIXIN
			// 小程序分享
			onShareAppMessage: function(options) {
				var that = this;
				var path = '/pages/users/user_integral/goods_detail/index?goods_id='+this.goods_id + '&exchange_integral=' + this.exchange_integral
				return {
					title: this.goodsInfo.goods_name,
					path: path,
					imageUrl: this.goodsInfo.img_gallery[0].img_url,
					success: function(res) {},
					fail: function() {},
				};
			},
			
			// 分享到朋友圈
			onShareTimeline(res2) {
				var that = this;
				var path = '/pages/users/user_integral/goods_detail/index?goods_id='+this.goods_id + '&exchange_integral=' + this.exchange_integral
				return {
					title: this.goodsInfo.goods_name,
					path: path,
					imageUrl: this.goodsInfo.img_gallery[0].img_url,
					success: function(res) {},
					fail: function() {},
				}
			},
			// #endif
			changeTab(e) {
				this.current = e;
			},
			swiperChangeItem: function(e) {
				this.current = e.detail.current;
			},
			exchange() {
				uni.navigateTo({
					url: '/pages/users/user_integral/order/index?rec_id=' + this.goodsInfo.goods_id + '&number=' +
						this.exchange_number
				})
			},
			exchangeChange(e) {
				console.log(e)
				this.exchange_number = e.value;
			},
			storeTo(id) {
				uni.navigateTo({
					url: '/pages/store/index?supplier_id=' + this.goodsInfo.supplier_id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border: 1px solid #ffffff;
		padding: 3px 7px;
		opacity: 0.8;
	}

	.page-content {
		width: 100%;
		background-color: #FFFFFF;
		font-size: 30rpx;

		.tab-box {
			width: 100%;
			height: 90rpx;
			font-size: 24rpx;
			border-bottom: 2rpx solid #E5E5E5;
			align-self: center;

			view {
				line-height: 90rpx;
			}

			.selected {
				color: $theme-color;
			}
		}


		.swiper-item {
			width: 100%;
			padding-bottom: 100rpx;

			.goods-box {
				width: 100%;

				.img-box {
					width: 100%;
					height: 700rpx;

					image {
						width: 100%;
						height: 700rpx;
					}
				}

				.goods-name {
					width: 100%;
					padding: 30rpx;
					padding-bottom: 10rpx;

					.txt-price {
						font-size: 40rpx;
						color: $theme-color;
						padding-right: 20rpx;
					}

					.txt-unit {
						font-size: 24rpx;
						color: #A1A1A1;
					}

					.txt-old {
						font-size: 24rpx;
						color: #A1A1A1;
						padding-left: 10rpx;
					}

					.txt-oldprice {
						font-size: 24rpx;
						color: #A1A1A1;
						text-decoration: line-through;
						padding-left: 10rpx;
						padding-right: 10rpx;

					}
				}

				.mode-box {
					width: 100%;
					padding: 20rpx 30rpx;
					border-top: 10rpx solid #EEEEEE;
					position: relative;

					.left {
						width: 100%;
						padding-right: 80rpx;
					}

					.right {
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						top: 20rpx;
						right: 0rpx;

						image {
							width: 45rpx;
							height: 45rpx;
							object-fit: cover;
							margin: 0 auto;
						}
					}
				}

				.store-box {
					width: 100%;
					padding: 20rpx 30rpx;
					border-top: 12rpx solid #EEEEEE;

					.store-top {
						width: 100%;
						height: 250rpx;
						line-height: 150rpx;
						display: flex;

						.left {
							flex: 1;
							width: 100%;
							height: 250rpx;

							.img {
								width: 200rpx;
								height: 200rpx;
								object-fit: cover;
								margin: 0 auto;
								margin-top: 25rpx;
							}

						}

						.right {
							flex: 3;
							height: 250rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							padding-left: 20rpx;
						}
					}

					.store-contact {
						padding: 20rpx 0;
						color: #858585;
						font-size: 26rpx;
						line-height: 50rpx;
					}

					.store-status {
						width: 100%;
						padding: 30rpx;
						display: flex;
						text-align: center;
						border-bottom: 1rpx solid #E8E8E8;

						.left {
							flex: 1;
							line-height: 50rpx;
							border-right: 1rpx solid #E8E8E8;

						}

						.middle {
							flex: 1;
							line-height: 50rpx;
							border-right: 1rpx solid #E8E8E8;
						}

						.right {
							flex: 1;
							font-size: 26rpx;
						}
					}
				}

				.store-other {
					width: 100%;
					height: 100rpx;
					margin-bottom: 100rpx;
					display: flex;

					.left {
						flex: 1;
						height: 100rpx;

						.love {
							width: 86%;
							height: 90rpx;
							margin: 0 auto;
							display: flex;
							border: 2rpx solid #A0A0A0;
							border-radius: 10rpx;

							.love-left {
								flex: 1;
								height: 90rpx;

								.img {
									width: 45rpx;
									height: 45rpx;
									margin: 0 auto;
									margin-right: 0;
									margin-top: 21rpx;

									image {
										width: 45rpx;
										height: 45rpx;
										object-fit: contain;
									}
								}
							}

							.love-right {
								flex: 2;
								padding-left: 10rpx;
								height: 90rpx;
								line-height: 90rpx;
							}
						}
					}
				}
			}
		}

		.footer {
			width: 100%;
			height: 100rpx;
			padding: 0 20rpx 0 30rpx;
			position: fixed;
			border-top: 1rpx solid #f0f0f0;
			box-sizing: border-box;
			background-color: #fff;
			height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
			bottom: 0;
			/* #ifdef H5 */
			bottom: 0rpx;
			/* #endif */
			/* #ifdef APP-PLUS */
			bottom: 0rpx;
			/* #endif */
			z-index: 40;

			.bnt {
				.bnts {
					width: 222rpx;
					text-align: center;
					line-height: 76rpx;
					color: #fff;
					font-size: 28rpx;
				}
			}

			.iconfont {
				text-align: center;
				font-size: 40rpx;
			}

			.icon-gouwuche1 {
				position: relative;

				.num {
					color: #fff;
					position: absolute;
					font-size: 18rpx;
					padding: 2rpx 10rpx 3rpx;
					border-radius: 200rpx;
					top: -10rpx;
					right: -10rpx;
					background-color: rgba(233, 51, 35, 1) !important;
				}
			}

			.icon-shoucang1 {
				color: rgba(233, 51, 35, 1);
			}

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.text {
					text-align: center;
					font-size: 14px;
					font-family: PingFang SC;
				}
			}
		}


		.mode-select-box {
			.mode-select {
				width: 90%;
				height: 600rpx;
				margin: 20rpx auto;

				.bottom {
					width: 100%;
					height: 100rpx;
					display: flex;
					text-align: center;

					.left {
						flex: 1;
						height: 100rpx;
						line-height: 100rpx;
						background-color: #EEEEEE;
					}

					.right {
						flex: 1;
						height: 100rpx;
						line-height: 100rpx;
						background-color: $theme-color;
						color: #FFFEFF;
					}
				}

				.shopping-goods-str {
					width: 100%;
					margin: 60px auto;
					display: flex;
					justify-content: space-between;
				}

				.img {
					width: 100%;
					height: 200rpx;
					display: flex;

					image {
						width: 200rpx;
						height: 200rpx;
						margin-left: 30rpx;
					}

					.img-txt {
						padding-left: 20rpx;
						height: 200rpx;
						font-size: 28rpx;

						.price {
							line-height: 120rpx;
							height: 100rpx;
							color: $theme-color;
						}

						.number {
							line-height: 80rpx;
							height: 100rpx;
							font-size: 24rpx;
						}
					}
				}
			}

		}

	}
</style>